<template>
    <MyContainer>
        <!-- 搜索 -->
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="商品id">
                <el-input v-model="queryParams.id" placeholder="输入商品id" clearable />
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="queryParams.goodsName" placeholder="输入商品名称" clearable />
            </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="list" border stripe style="width: 100%;margin-top: 12px;">
            <el-table-column align="center" prop="id" label="商品id" width="180" />
            <el-table-column align="left" prop="goodsName" label="商品名称" width="180" />
            <el-table-column align="center" prop="categoryName3" label="商品分类" />
            <el-table-column align="center" prop="brandId" label="品牌名称" />
            <el-table-column align="center" prop="price" label="商品价格" />
            <el-table-column align="center" prop="quantity" label="库存" />
            <el-table-column align="center" label="操作">
                <template #default="scoped">
                    <el-button type="text">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </MyContainer>
</template>

<script setup lang="ts">
import { getGoodsList } from "@/api/goods/goods";

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
    pageSize: 10, // 页面大小
    pageNumber: 1, // 当前页数
    sort: "create_time", // 默认排序字段
    order: "desc", // 默认排序方式
    id: "",
    goodsName: ""
})
const getList = async () => {
    loading.value = true
    try {
        const res:any = await getGoodsList(queryParams)
        console.log(res);
        if(res.success){
            total.value = res.data.total
            list.value = res.data.records
        }
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false
    }

}
onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped></style>